<template>
	<view>
		<uni-popup ref="loginRef"  background-color="#fff">
			  <view class="popup-content-2" >
				 <view class="login">
					 <view v-if="firstStep"  class="login">
						 <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							 <image class="avatar-wrapper-image" mode="scaleToFill" :src="avatarUrl"></image>
						 </button> 
						 <input type="nickname"  @blur="getnickname" v-model="userForm.nickName" class="weui-input" placeholder="请输入昵称"/>
						 <view>
							 <button @click="goNextStep" size="mini" style="margin-right: 5px;" plain type="primary">下一步</button>
							 <button @click="cancelLogin" size="mini">取消</button>
						 </view>
					 </view>
					 <view v-else  class="login">
						 <button  size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
						 <view>
							 <button @click="goLastStep"  size="mini" plain  style="margin-right: 5px;" type="primary">上一步</button>
							 <button @click="cancelLogin" size="mini">取消</button>
						 </view>
					 </view>
					</view>
			  </view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { login ,userInfo,logout,edit,loginWx} from '@/api/app-user.ts';
import { onShow } from '@dcloudio/uni-app';
import { nextTick } from 'process';
import { watchEffect } from 'vue';
	import { ref} from 'vue';
	const loginRef=ref()
	onShow(()=>{
		console.log("ho2",uni.getStorageSync('login'))
		if(uni.getStorageSync('login')){
			nextTick(()=>{
				loginRef.value.open('bottom')
			})
		}
	})
	watchEffect(()=>{
		console.log("ho3",uni.getStorageSync('login'))
		if(uni.getStorageSync('login')){
			nextTick(()=>{
				loginRef.value.open('bottom')
			})
		}
	})
	const getUser=()=>{
		userInfo(null).then(res2=>{
			uni.setStorageSync('user',res2.data)
		})
	}
	const userForm=ref({
		avatar :'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					  nickName:'',wxCode:'',phone:'',phoneCode:''
	})
	const firstStep=ref(true)
	const goNextStep=()=>{
		console.log("sfdsfsd"+JSON.stringify(userForm.value))
		if (userForm.value.avatar === "") {
		  uni.showToast({
			title:'请选择您的头像'
		  })
		  return
		} else if (userForm.value.nickName === "") {
		  uni.showToast({
			title:'请输入您的昵称'
		  })
		  return
		} 
		firstStep.value=false
	}
	const goLastStep=()=>{
		firstStep.value=true
	}
	const cancelLogin=()=>{
		loginRef.value.close()
	}
	const avatarUrl=ref("https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0")
	const onChooseAvatar=(e)=>{
		userForm.value.avatar = wx.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64')
		avatarUrl.value=e.detail.avatarUrl
	}
	const getnickname=(e)=>{
		userForm.value.nickName=e.detail.value;
	}
	const getPhoneNumber=(e)=>{
		userForm.value.phoneCode=e.detail.code
		handleWxLogin()			
	}
	const handleWxLogin=()=>{
		if (userForm.value.avatar === "") {
		  uni.showToast({
		  	title:'请选择您的头像'
		  })
		  return
		} else if (userForm.value.nickName === "") {
		  uni.showToast({
		  	title:'请输入您的昵称'
		  })
		  return
		} else {
		  wx.login({
			success (res) {
				console.log("dataL"+JSON.stringify(res))
				console.log("code:"+res.code)
			  if (res.code) {
				userForm.value.wxCode = res.code;
				//发起网络请求
				pwdLogin()
			  } else {
				console.log('登录失败！' + res.errMsg)
			  }
			}
		  })
		}
	}
	// 微信授权信息登录
	const  pwdLogin=async()=>{
	  loginWx(userForm.value).then(res=>{
		  if(res.code === 200){
			  uni.setStorage({
			  	key:"token",
				data:res.data,
				success() {
					loginRef.value.close()
					uni.setStorageSync('login',false)
					getUser()
				}
			  })
			  
		  }
	  })
	}
</script>

<style scoped>
.popup-content-2 {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
		height: 250px;
		background-color: #fff;
	}
	.login{
		 text-align: center;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-around;
		 align-items: center;
		 height: 100%;
		 width: 100%;
	}	
	
	.avatar-wrapper{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px;
	}
	.avatar-wrapper-image{
		width:40px;
		height:40px;
	}
</style>
